<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">网络资源</x-header>
    <div class="content">
        <ul>
        <li v-for="(x,i) of items" :key="i"  :style="{color:x.color}" class="ub pad my-item" @click="handleItem(x)">
            <i class="fa ub uc" :class="x.icon"></i>
            <div class="title uf-1">{{x.name}}</div>
            <div class="ub uc t-gray">
                <i class="fa fa-chevron-right"></i>
            </div>
        </li>
        </ul>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
export default {
  data() {
    return {
      items: [
        {
          name: "路由导航",
          color: "#FF9900",
          icon: "fa-road",
          link: "/resource-one/ZX"
        },
        {
          name: "电子运维资源",
          color: "#993366",
          icon: "fa-rocket",
          link: "/resource-one/XDL"
        },
        {
          name: "号线资源",
          color: "#CC3399",
          icon: "fa-rss",
          link: "/resource-one/DT"
        },
      ]
    };
  },
  mounted() {},
  methods: {
    handleItem(x) {
        this.$store.commit('headerTitleInResource',{headerTitle:x.name})
        this.$router.push({path:x.link})
    }
  },
  components: {
    XHeader
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  padding: 0.8em;
  border-bottom: 1px solid #ddd;  
  .title {
    padding-left: 20px;
  }
  .sub-title {
    font-size: 0.8em;
  }
  i {
    margin-left: 10px;
  }
}
</style>